<!-- 省市区 -->
<template>
  <div class="selectBox">
    <a-select
      v-if="enableValue >= 1"
      placeholder="省"
      v-model="areaInfo.provinceId"
      @change="changeProvince"
      :disabled="disabled"
      allowClear
      style="width: 150px"
    >
      <a-select-option :value="item.id" v-for="(item, index) in provinceArr" :key="index"
        >{{ item.extName }}
      </a-select-option>
    </a-select>
    <a-select
      v-if="enableValue >= 2"
      placeholder="市"
      v-model="areaInfo.cityId"
      @change="changeCity"
      :disabled="disabled"
      :allowClear="!childRequired"
      style="width: 150px"
    >
      <a-select-option :value="item.id" v-for="(item, idx) in cityArr" :key="idx">{{ item.extName }} </a-select-option>
    </a-select>
    <a-select
      v-if="enableValue >= 3"
      placeholder="区"
      v-model="areaInfo.areaId"
      :disabled="disabled"
      @change="changeArea"
      :allowClear="!childRequired"
      style="width: 150px"
    >
      <a-select-option :value="item.id" v-for="(item, index) in areaArr" :key="index"
        >{{ item.extName }}
      </a-select-option>
    </a-select>
    <a-select
      v-if="isStreet && enableValue >= 4"
      placeholder="街道"
      v-model="areaInfo.streetId"
      :disabled="disabled"
      @change="changeStreet"
      :allowClear="!childRequired"
      style="width: 150px"
    >
      <a-select-option :value="item.id" v-for="(item, index) in streetArr" :key="index"
        >{{ item.extName }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
import { getDistList } from '@/api/system/system'
export default {
  props: {
    area: {
      type: Object,
      default: () => {}
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否需要选择街道
    isStreet: {
      type: Boolean,
      default: false
    },
    // 子级是否必选
    childRequired: {
      type: Boolean,
      default: false
    },
    enableValue: {
      type: Number,
      default: 4
    }
  },
  components: {},
  data() {
    return {
      areaInfo: {
        provinceId: undefined,
        cityId: undefined,
        areaId: undefined,
        streetId: undefined
      },
      provinceArr: [],
      cityArr: [],
      areaArr: [],
      streetArr: []
    }
  },
  watch: {
    area: {
      handler(nval, oval) {
        let newValue = JSON.stringify(nval)
        let oldValue = JSON.stringify(oval)
        if (newValue !== oldValue) {
          this.areaInfo = JSON.parse(newValue)
          this.getProvinceAndCity(nval)
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {},
  methods: {
    async getProvinceAndCity(val) {
      if (JSON.stringify(val) != '{}') {
        if (val.provinceId) {
          await this.getAddressData(val.provinceId, 'city')
        }
        if (val.cityId) {
          await this.getAddressData(val.cityId, 'area')
        }
        if (this.isStreet && val.areaId) {
          await this.getAddressData(val.areaId, 'street')
        }
      }
    },
    //省
    changeProvince(value) {
      this.areaArr = []
      this.$emit('getArea', {
        provinceId: value,
        cityId: undefined,
        areaId: undefined
      })
      this.getAddressData(value, 'city')
      if (value === void 0) {
        this.setData('city', [])
      }
      this.setData('area', [])
      this.setData('street', [])
    },
    //市
    changeCity(value) {
      this.$emit('getArea', {
        provinceId: this.areaInfo.provinceId,
        cityId: value,
        areaId: undefined
      })
      this.getAddressData(value, 'area')
      if (value === void 0) {
        this.setData('area', [])
      }
      this.setData('street', [])
    },
    //区
    changeArea(value) {
      if (this.isStreet) {
        this.$emit('getArea', {
          provinceId: this.areaInfo.provinceId,
          cityId: this.areaInfo.cityId,
          areaId: value,
          streetId: undefined
        })
        this.getAddressData(value, 'street')
        if (value === void 0) {
          this.setData('street', [])
        }
      } else {
        this.$set(this.areaInfo, 'areaId', value)
        this.$emit('getArea', this.areaInfo)
      }
    },
    // 街道
    changeStreet(value) {
      this.$set(this.areaInfo, 'streetId', value)
      this.$emit('getArea', this.areaInfo)
    },
    setData(type, data) {
      const that = this
      switch (type) {
        case 'province':
          that.provinceArr = data
          break
        case 'city':
          that.cityArr = data
          // if (that.childRequired && data.length && that.area.provinceId && !that.area.cityId) {
          //   that.changeCity(data[0].id)
          // }
          break
        case 'area':
          that.areaArr = data
          // if (that.childRequired && data.length && that.area.provinceId && that.area.cityId && !that.area.areaId) {
          //   that.changeArea(data[0].id)
          // }
          break
        case 'street':
          that.streetArr = data
          // if (
          //   that.childRequired &&
          //   data.length &&
          //   that.area.provinceId &&
          //   that.area.cityId &&
          //   that.area.areaId &&
          //   !that.area.streetId
          // ) {
          //   that.changeStreet(data[0].id)
          // }
          break
      }
    },
    async getAddressData(value, type) {
      let key = type + '_' + value
      let sessionStorageItem = sessionStorage.getItem(key)

      //优先取缓存数据
      if (sessionStorageItem) {
        this.setData(type, JSON.parse(sessionStorageItem))
        return
      }

      var params = {
        pid: value
      }
      const { rows } = await getDistList(params)
      this.setData(type, rows)
      sessionStorage.setItem(key, JSON.stringify(rows))
    }
  },
  created() {
    if (!this.provinceArr.length) this.getAddressData('0', 'province')
    // this.getProvinceAndCity(this.area)
  },
  mounted() {}
}
</script>
<style scoped>
.selectBox {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 12px;
}
</style>
